<!-- 谁看过我：家政公司列表 -->
<template>
    <view class="nova-column corps-wrapper">
        <text class="title">{{ jobstatus == 0 ? '谁看过我' : '接单家政公司' }}</text>
        <block v-if="corps.length > 0">
            <view class="nova-column corp" v-for="(item, index) in corps" :key="index">
                <view class="nova-row-center">
                    <image class="head" :src="item.headimg || item.company_logo"></image>
                    <text class="corp-name" style="margin-left: 28rpx;">{{ item.company_name || '此公司很懒，连个名字都没留下' }}</text>
                    <text class="more" @click="showDetail(item)">查看详情</text>
                </view>
                <block v-if="jobstatus > 0 && item.nurseResume">
                    <text class="aunty">推荐阿姨</text>
                    <view class="nova-row-center" style="margin-left: 50rpx;">
                        <image class="head" :src="item.nurseResume.photo"></image>
                        <text class="aunty" style="margin-left: 28rpx;">{{ item.nurseResume.name }}</text>
                        <text class="more"></text>
                    </view>
                </block>
            </view>
        </block>
        <view v-else class="nova-column nova-flex-center" style="padding: 50rpx 0;">
            <image style="width: 180rpx; height: 210rpx;" src="../../static/zw/nocorps.png"></image>
            <text style="font-size: 14rpx; color: #BCBCBC; margin-top: 34rpx;">空空如也～～</text>
        </view>
        <uni-popup type="center" ref="corp" class="popup">
            <view class="content nova-column" v-if="company">
                <image class="logo" :src="company.headimg || company.company_logo"></image>
                <text class="title">公司信息</text>
                <view class="nova-column" style="margin-top: 18rpx; margin-bottom: 27rpx;">
                    <text class="desc">{{ getPopContents(company) }}</text>
                </view>
                <view class="nova-row-center">
                    <block v-if="company.authentication">
                        <text class="text-link ctag" v-for="(item, index) in company.authentication" :key="index">{{ item.type }}</text>
                    </block>
                </view>
                <image class="close" src="../../static/img/popup-close.png" @click.stop="showCorpPopup(false)"></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import uniPopup from '../../components/uni-popup/uni-popup.vue';
export default {
    name: 'c-companys',
    components: {
        uniPopup
    },
    props: {
        corps: {
            type: Array,
            default: () => []
        },
        job_status: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            company: undefined,
            jobstatus: parseInt(this.job_status)
        };
    },
    methods: {
        showDetail(corp) {
            this.company = corp;
            this.showCorpPopup(true);
        },
        // 查看公司信息详情弹窗 -- 公司信息数据组织
        getPopContents(c) {
            let arr = [];
            if (c) {
                if (c.company_name) {
                    arr.push(`名称：${c.company_name}`);
                }
                if (c.company_telephone) {
                    arr.push(`电话：${c.company_telephone}`);
                }
                if (c.company_address) {
                    arr.push(`地址：${c.company_address}`);
                }
                if (c.company_introduce) {
                    arr.push(`公司介绍：${c.company_introduce}`);
                }
            }
            return arr.join('\n');
        },
        showCorpPopup(show) {
            this.corpPopup = show;
            if (show) {
                this.$refs.corp.open();
            } else {
                this.$refs.corp.close();
            }
        }
    },
    created() {}
};
</script>

<style lang="scss">
.corps-wrapper {
    padding: 34rpx 34rpx;
    .head {
        width: 90rpx;
        height: 90rpx;
        margin: 34rpx 0;
        border-radius: 6rpx;
        background-color: #f2f2f2;
    }
    .title {
        font-size: 30rpx;
        color: #000000;
    }
    .corp-name {
        color: #666666;
        font-size: 26rpx;
        flex: 1;
    }
    .more {
        color: $uni-color-primary;
        font-size: 24rpx;
    }
    .aunty {
        color: #999999;
        font-size: 24rpx;
    }
}
.popup {
    .content {
        position: relative;
        width: 680rpx;
        margin: 34rpx;
        border-radius: 32rpx;
        background-color: white;
        padding: 120rpx 20rpx 30rpx 34rpx;

        .logo {
            width: 200rpx;
            height: 200rpx;
            border-radius: 100rpx;
            box-shadow: 0 0 1 1 $uni-color-primary;
            position: absolute;
            top: -100rpx;
            left: 240rpx;
        }

        .close {
            width: 68rpx;
            height: 68rpx;
            position: absolute;
            bottom: -100rpx;
            left: 294rpx;
        }

        .title {
            font-size: 36rpx;
            color: #333;
        }

        .desc {
            font-size: 28rpx;
            color: #999;
            line-height: 40rpx;
        }

        .ctag {
            padding: 0 10rpx;
            line-height: 40rpx;
            height: 40rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            border: 1rpx solid $uni-color-primary;
        }
    }
}
</style>
